<template>
    <view class="home">
        <swiper
            class="swiper" 
            circular 
        >
            <swiper-item>
                <image 
                    src="http://60.191.72.66:10088/business/image/jdzy/applet/static/banner/banner-1.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </swiper-item>
            <swiper-item>
                <image 
                    src="http://60.191.72.66:10088/business/image/jdzy/applet/static/banner/banner-5.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </swiper-item>
        </swiper>
        <uni-notice-bar 
            show-icon 
            scrollable
            text="8:30到17:30工作时间可自助下单,17:30后至第二天8:30,请点击联系人工4008897120" 
            @click="callPhone"
        />
        <uni-forms
            :model="formData" 
            ref="form" 
            :rules="rules1" 
            validateTrigger="submit" 
            label-width="180rpx"
            err-show-type='none'
        >
            <view class="box-1">
                <!-- <uni-section
                    type="line"
                    title="转运服务" 
                    sub-title=""
                >
                </uni-section> -->
                <view class="zylx">
                    <button 
                        style="display: flex;justify-content: center;align-items: center;"
                        disabled
                    >
                        <image
                            src="http://60.191.72.66:10088/business/image/jdzy/applet/static/button/car2.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="button-img"
                        ></image>
                        <view style="font-weight: bold; font-size: 35rpx">车辆转运</view>
                    </button>
                    <button
                        @click="go"
                        style="background-color: #d1df58;color: #fff;display: flex;justify-content: center;align-items: center;"
                    >
                        <image
                            src="http://60.191.72.66:10088/business/image/jdzy/applet/static/button/plane.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="button-img"
                        ></image>
                        <view style="font-weight: bold;; font-size: 35rpx">航空转运</view>
                    </button>
                </view>
                <!-- <uni-section
                    type=""
                    title="" 
                    sub-title="如需使用直升机等飞行交通工具进行转运,需填写此项"
                >
                </uni-section> -->
            </view>
            <!-- <view class="box-1">
                <uni-section
                    type="line"
                    title="航空转运" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="zo_ex73"
                    label="航空转运"
                >
                    <view 
                        class="hkzy"
                        @click="go"
                    >
                        航空转运服务 &nbsp; >
                    </view>
                </uni-forms-item>
                <uni-section
                    type=""
                    title="" 
                    sub-title="如需使用直升机等飞行交通工具进行转运,需填写此项"
                >
                </uni-section>
            </view> -->
            <view class="box-1">
                <uni-section
                    type="line"
                    title="地址" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="chengshi"
                    label="城市"
                    required
                >
                    <view class="my-disabled-input-box" @click="openUvPicker1Ref">
                        <uni-easyinput
                            v-model="formData.chengshi"
                            type="text" 
                            prefixIcon="location-filled"
                            placeholder="请选择城市" 
                            :disabled="true"
                        />
                    </view>
                    <uv-picker
                        ref="uvPicker1Ref" 
                        keyName="label"
                        :loading="uvLoading1"
                        :columns="uvColumns1" 
                        @change="uvChange1"
                        @confirm="uvConfirm1"
                    ></uv-picker>
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex41"
                    label="转运起点"
                    required
                >
                    <view class="point-box">
                        <image
                            src="@/static/index/starting-point.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="point-img"
                        ></image>
                        <view 
                            class="point-box-disabled-input" 
                            @click="showPopup3"
                        >
                            <uni-easyinput
                                v-model="formData.zo_ex41"
                                type="text" 
                                placeholder="请选择转运起点" 
                                :disabled="true"
                            />
                        </view>
                        <!-- <uni-combox 
                            v-model="formData.zo_ex41"
                            style="width: 100%"
                            :candidates="zo_ex41Range" 
                            placeholder="请选择转运起点"
                            emptyTips="请输入详细地址"
                            @input="zo_ex41Input"
                        ></uni-combox> -->
                    </view>
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex42"
                    label="转运终点"
                    required
                >
                    <view class="point-box">
                        <image
                            src="@/static/index/ending-point.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="point-img"
                        ></image>
                        <view
                            class="point-box-disabled-input" 
                            @click="showPopup4"
                        >
                            <uni-easyinput
                                v-model="formData.zo_ex42"
                                type="text" 
                                placeholder="请选择转运终点" 
                                :disabled="true"
                            />
                        </view>
                        <!-- <uni-combox
                            v-model="formData.zo_ex42"
                            style="width: 100%"
                            :candidates="zo_ex42Range" 
                            placeholder="请选择转运终点"
                            emptyTips="请输入详细地址"
                            @input="zo_ex42Input"
                        ></uni-combox> -->
                    </view>
                </uni-forms-item>
            </view>
            <view class="box-1">
                <uni-section
                    type="line"
                    title="人员信息" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="zo_ex2"
                    label="姓名"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex2"
                        type="text" 
                        placeholder="请输入姓名" 
                    />
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex3"
                    label="性别"
                    required
                >
                    <uni-data-select
                        v-model="formData.zo_ex3"
                        :localdata="zo_ex3Range"
                        placeholder="请选择性别"
                    ></uni-data-select>
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex4"
                    label="年龄"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex4"
                        type="digit" 
                        placeholder="请输入年龄" 
                    />
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex6"
                    label="联系人"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex6"
                        type="text" 
                        placeholder="请输入联系人" 
                    />
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex7"
                    label="联系电话"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex7"
                        maxlength="11"
                        type="digit" 
                        placeholder="请输入联系电话" 
                    />
                </uni-forms-item>
            </view>
            <view 
                class="box-1"
            >
                <uni-section
                    type="line"
                    title="其他信息" 
                    sub-title=""
                >
                </uni-section>
                <!-- <uni-forms-item
                    name="zo_ex74"
                    label="是否吸氧"
                    required
                >
                    <uni-data-select
                        v-model="formData.zo_ex74"
                        :localdata="zo_ex74Range"
                        placeholder="请选择是否吸氧"
                    ></uni-data-select>
                </uni-forms-item> -->
                <uni-forms-item
                    name="zo_ex49"
                    label="是否抬楼"
                >
                    <uni-data-select
                        v-model="formData.zo_ex49"
                        :localdata="zo_ex74Range"
                        placeholder="请选择是否抬楼"
                    ></uni-data-select>
                </uni-forms-item>
                <!-- <uni-forms-item
                    name="kaipiao"
                    label="是否开票"
                    required
                >
                    <uni-data-select
                        v-model="formData.kaipiao"
                        :localdata="zo_ex74Range"
                        placeholder="请选择是否开票"
                    ></uni-data-select>
                </uni-forms-item> -->
                <uni-forms-item
                    name="zo_ex21"
                    label="优惠类型"
                >
                    <uni-data-select
                        v-model="formData.zo_ex21"
                        :localdata="zo_ex21Range"
                        placeholder="请选择优惠类型"
                        @change="zo_ex21Change"
                    ></uni-data-select>
                </uni-forms-item>
                
                <uni-forms-item
                    name="zo_ex40"
                    label="客户留言"
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex40"
                        type="textarea" 
                        autoHeight
                        maxlength="500"
                        placeholder="请输入客户留言" 
                    />
                </uni-forms-item>
            </view>
            <view class="box-1">
                <uni-section
                    type="line"
                    title="转运时间" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="zo_dat1"
                    label="转运时间"
                    required
                >
                    <uni-datetime-picker 
                        type="datetime" 
                        v-model="formData.zo_dat1"
                        :start="new Date()"
                        placeholder="请选择转运时间"
                        hide-second
                    />
                </uni-forms-item>
            </view>
            <view 
                class="box-1"
            >
                <uni-section
                    type="line"
                    title="相关证件" 
                    sub-title=""
                >
                </uni-section>
                <myFilePicker
                    name="imageValue1"
                    label="相关证件"
                    v-model="formData.imageValue1"
                    v-model:f_id="formData.f_id"
                />
                <uni-section
                    type=""
                    title="" 
                    sub-title="若您符合相关优惠类型,请上传相关证件"
                >
                </uni-section>
                <!-- <myFilesPicker 
                    name="instructions"
                    label="相关证件"
                    v-model="formData.instructions"
                /> -->
            </view>
            <view class="box-1">
                <view class="money-box">
                    <span class="money-span-1">预估费用：</span>
                    <span class="money-span-2">{{formData.zo_ex23}}元</span>
                </view>
            </view>
            <!-- style="background-color: #000;color: #fff;display: flex;justify-content: center;align-items: center;" -->
            <button  
                @click="submit1"
                style="background-color: #d1df58;color: #fff;display: flex;justify-content: center;align-items: center;"
            >
                <image
                    src="http://60.191.72.66:10088/business/image/jdzy/applet/static/button/car2.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="button-img"
                ></image>
                <view style="font-weight: bold;">呼叫非紧急转运</view>
            </button>
         </uni-forms>
         <!-- 弹框 -->
         <uni-popup 
            ref="popup1" 
            type="center"
        >
            <map 
                :latitude="latitude" 
                :longitude="longitude"
                markers="[]"
            ></map>
         </uni-popup>
         <uni-popup
             ref="popup2" 
             type="center"
             :is-mask-click="false"
         >
            <view class="popup2-box">
                <image
                    src="@/static/popup/phone.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="popup2-img"
                ></image>
                <view class="popup2-text">17:30后至第二天8:30不可下单,请联系人工4008897120'</view>
                <button 
                    type="primary"
                    @click="callPhone"
                >
                    拨打人工电话
                </button>
            </view>
          </uni-popup>
          <uni-popup
              ref="popup3" 
              type="top"
          >
                <view style="width: 100%; height: 100vh">
                    <uni-combox
                        v-model="formData.zo_ex41"
                        style="width: 100%"
                        :candidates="zo_ex41Range" 
                        placeholder="请选择转运起点"
                        emptyTips="请输入详细地址"
                        @input="zo_ex41Input"
                    ></uni-combox>
                    
                    <button
                        @click="popup3.close()"
                        style="background-color: #d1df58;color: #fff;display: flex;justify-content: center;align-items: center; position: absolute; bottom: 0; width: 100%"
                    >
                        <view style="font-weight: bold;">确认</view>
                    </button>
                </view>
           </uni-popup>
           <uni-popup
               ref="popup4" 
               type="top"
           >
                <view style="width: 100%; height: 100vh">
                    <uni-combox
                        v-model="formData.zo_ex42"
                        style="width: 100%"
                        :candidates="zo_ex42Range" 
                        placeholder="请选择转运终点"
                        emptyTips="请输入详细地址"
                        @input="zo_ex42Input"
                    ></uni-combox>
                    <button
                        @click="popup4.close()"
                        style="background-color: #d1df58;color: #fff;display: flex;justify-content: center;align-items: center; position: absolute; bottom: 0; width: 100%"
                    >
                        <view style="font-weight: bold;">确认</view>
                    </button>
                </view>
            </uni-popup>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onTabItemTap } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, onMounted, watchEffect, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getCityApi, getPlaceRetrievalApi, countkilometreApi, countmoneyApi, appSaveOrderApi, preferentialListApi } from '@/apis/index'
    import { isPhone } from '@/utils/utils'
    import uploadApi from '@/apis/uploadApi'
    import myFilesPicker from '@/components/myFilesPicker/myFilesPicker.vue'
    import myFilePicker from '@/components/myFilePicker/myFilePicker.vue'
    
    const popup1: Ref<any> = ref(null)
    const popup2: Ref<any> = ref(null)
    const popup3: Ref<any> = ref(null)
    const popup4: Ref<any> = ref(null)
    
    const latitude: Ref<number> = ref(0)
    const longitude: Ref<number> = ref(0)
    // onReady(() => {
        // 获取位置权限
        // uni.authorize({
        //     scope: 'scope.userLocation',
        //     success: () => {
        //         uni.getLocation({
        //         	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        //         	success: function (res) {
        //                 console.log(res)
        //         		latitude.value = res.latitude;
        //         		longitude.value = res.longitude;
                        
        //         	},
        //             fail: (err) => {
        //             }
        //         });
        //     }
        // })
    // })
    onMounted(() => {
        // 17:30后至第二天8:30 不可下单 跳出弹窗 提醒请联系人工  联系电话：4008897120
        let hour = new Date().getHours()
        let minute = new Date().getHours()
        // if ((hour < 8 || (hour == 8 && minute < 30)) || (hour > 17 || (hour == 17 && minute >= 30))) {
        //     // popup2.value.open()
        //     uni.showModal({
        //         showCancel: true,
        //         title: '提示',
        //         content: '17:30后至第二天8:30不可下单,请联系人工4008897120', 
        //         success: function (res) {
        //             if (res.confirm) {
        //             	console.log('用户点击确定');
        //                 uni.makePhoneCall({
        //                     phoneNumber: '4008897120'
        //                 })
        //             } else if (res.cancel) {
        //             	console.log('用户点击取消');
        //             }
        //         }
        //     });
        // }
    })
    onLoad((val) => {
        preferentialListApi({}).then(res => {
            res.data.forEach(item => {
                item.text = item.zb_ex1
                item.value = item.zb_ex1
            })
            zo_ex21Range.value =  res.data
        })
    })
    const showPopup1 = (val1: string, val2: string,) => {
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        popup1.value.open()
        // popup1.value.close()
        console.log(latitude.value)
        console.log(longitude.value)
        uni.chooseLocation({
            success: (res) => {
                console.log(res)
                console.log('位置名称：' + res.name);
                console.log('详细地址：' + res.address);
                console.log('纬度：' + res.latitude);
                console.log('经度：' + res.longitude);
                formData.value[val1] = res.address
                formData.value[val2] = res.longitude + ',' + res.latitude
            }
        })
        
    }
    
    
    const zo_ex3Range: Raw<any[]> = markRaw([
        { value: '男', text: '男' },
        { value: '女', text: '女' },
    ])
    const zo_ex74Range: Raw<any[]> = markRaw([
        { value: '是', text: '是' },
        { value: '否', text: '否' },
    ])
    const zo_ex21Range: Ref<any[]> = ref([
        
    ])
    const zo_ex21Change = (val) => {
        console.log(val)
        zo_ex21Range.value.some((item) => {
            if (item.zb_ex1 == val) {
                formData.value.zo_ex22 = item.zb_ex2
                return true;
            }
        })
    }
    
    const formData: Ref<any> = ref({
        zo_ex73: '否',
        chengshi: '',
        zo_ex12: '',
        zo_ex41: '',
        zo_ex17: '',
        zo_ex18: '',
        zo_ex42: '',
        zo_ex2: '',
        zo_ex3: '',
        zo_ex4: '',
        zo_ex7: '',
        zo_ex6: '',
        zo_ex22: '',
        zo_ex40: '',
        zo_ex74: '',
        zo_ex21: '',
        zo_ex49: '',
        zo_dat1: '',
        zo_ex23: 0,
        instructions: [],
        imageValue1: '',
        f_id: '',
        zo_ex20: '',
        zo_ex54: '',
        zo_ex46: '',
        zo_ex53: '',
        // kaipiao: '',
    })
    // setTimeout(() => {
    //     formData.value.instructions = ['fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', 'fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg']
    // },1000)
    const rules1: any = reactive({
        zo_ex41: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择转运起点',
                },
                // {
                //     minLength: 3,
                //     maxLength: 5,
                //     errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
                // },
                // {
                //     validateFunction:function(rule, value, data, callback){
                //         if (value.length < 2) {
                //             callback('请至少勾选两个兴趣爱好')
                //         }
                //         return true
                //     }
                // }
            ],
        },
        zo_ex17: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择转运起点',
                },
            ],
        },
        zo_ex18: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择转运终点',
                },
            ],
        },
        zo_ex42: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择转运终点',
                },
            ],
        },
        zo_ex2: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入姓名',
                },
            ],
        },
        zo_ex3: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择性别',
                },
            ],
        },
        zo_ex4: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入年龄',
                },
            ],
        },
        zo_ex7: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入联系电话',
                },{
                    validateFunction: function(rule, value, data, callback){
                        if (!isPhone(value)) {
                            callback('请输入正确的联系电话')
                        }
                        return true
                    }
                }
            ],
        },
        zo_ex6: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入联系人',
                }
            ],
        },
        zo_ex74: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择是否吸氧',
                },
            ],
        },
        // kaipiao: {
        //     rules: [
        //         {
        //             required: true,
        //             errorMessage: '请选择是否开票',
        //         },
        //     ],
        // },
        chengshi: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择城市',
                },
            ],
        },
        // zo_ex49: {
        //     rules: [
        //         {
        //             required: true,
        //             errorMessage: '请选择是否抬楼',
        //         },
        //     ],
        // },
        zo_dat1: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择转运时间',
                },
            ],
        },
        // imageValue1: {
        //     rules: [
        //         {
        //             required: true,
        //             errorMessage: '请上传相关证件',
        //         },
        //     ],
        // },
        // instructions: {
        //     rules: [
        //         {
        //             required: true,
        //             errorMessage: '请上传相关证件',
        //         },
        //     ],
        // },
    })
    const form: Ref<any> = ref(null)
    // 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
    onReady(() => {
        form.value.setRules(rules1)
    })
    const submit1 = () => {
       console.log(form.value)
       console.log(formData.value)
        if (formData.value.zo_dat1?.split(':').length == 2) {
            formData.value.zo_dat1 = formData.value.zo_dat1.concat(':00')
        }
       form.value.validate().then((res: any) => {
           console.log('表单数据信息：', res);
            uni.showModal({
                showCancel: true,
                title: '提示',
                content: '您确认下单吗？',
                success: function (res1) {
                    if (res1.confirm) {
                        console.log('用户点击确定');
                        // 下单成功后，不可直接支付，订单支付进入待支付状态，需要通过人工后台电话联系确认，方可进行支付
                        appSaveOrderApi({
                             ...formData.value
                        }).then((res2: any) => {
                            console.log(res2)
                            if (res2.code == 200) {
                                 uni.showModal({
                                     showCancel: false,
                                     title: '提示',
                                     content: res2.msg, //订单已形成 稍后客服人员会与你联系 请保持电话通畅
                                     success: function (res3) {
                                         // uni.redirectTo({
                                         //     url: '/pages/myEquipment/myEquipment'
                                         // });
                                         uni.switchTab({
                                         	url: '/pages/transferOrder/transferOrder'
                                         });
                                         // if (res3.confirm) {
                                         // 	console.log('用户点击确定');
                                         // } else if (res3.cancel) {
                                         // 	console.log('用户点击取消');
                                         // }
                                     }
                                 });
                                 // uni.showToast({
                                 //     title: res2.msg,
                                 //     icon: 'none',
                                 //     mask: true,
                                 // });
                                 // uni.redirectTo({
                                 //     url: '/pages/myEquipment/myEquipment'
                                 // })
                            } else {
                                uni.showToast({
                                     title: res2.msg,
                                     icon: 'error',
                                     mask: true,
                                });
                            }
                        })
                    } else if (res1.cancel) {
                        console.log('用户点击取消');
                    }
               }
            });        
        }).catch((err: any) =>{
            console.log('表单错误信息：', err);
            uni.showToast({
                title: err[0].errorMessage,
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        })
    }
    const callPhone = () => {
        uni.makePhoneCall({
            phoneNumber: '4008897120'
        })
    }
    
    const uvColumns1: Ref<any[]> = ref([
        // ['中国', '美国'],
        // ['深圳', '厦门', '上海', '拉萨'],
        // ['深圳1区', '深圳2区']
    ])
    const uvLoading1: Ref<boolean> = ref(false)
    const uvPicker1Ref: Ref<any> = ref(null)
    const uvDefaultIndex: Ref<any[]> = ref([0,0,0])
    const openUvPicker1Ref = async() => {
        uvPicker1Ref.value.open()
        if (formData.value.chengshi) {
            return false;
        }
        uvLoading1.value = true;
        // 调接口把三行数据拿来
        try {
            let iid = '0'
            for(let i = 0; i < 3; i++) {
                let res = await getCityApi({
                    pId: iid,
                    level_source: i.toString(),
                    level_target: '2'
                })
                iid = res[0].id
                uvPicker1Ref.value.setColumnValues(i, res);
                // uvPicker1Ref.value.setIndexs(0, true)
            }
            uvPicker1Ref.value.setIndexs([0,0,0], true)
        } catch (err) {
            
        } finally {
            uvLoading1.value = false;
        }
    }
    const uvChange1 = async(e: any) => {
        console.log('change');
        const { columnIndex, index } = e;
        console.log(e)
        // 调接口拿数据
        try {
            uvLoading1.value = true;
            let iid = e.value[columnIndex].id
            for(let i = columnIndex; i < 2; i++) {
                let res = await getCityApi({
                    pId: iid,
                    level_source: (i+1).toString(),
                    level_target: '2'
                })
                iid = res[0].id
                uvPicker1Ref.value.setColumnValues(i+1, res);
            }
        } catch (err) {
            
        } finally {
            uvLoading1.value = false;
        }
    }
    const uvConfirm1 = (e: any) => {
        console.log('uvConfirm1');
        console.log(e);
       // 拿值
       e.value.forEach((item, index) => {
           console.log(item)
           if (index == 0) {
               formData.value.chengshi = item.label
               formData.value.zo_ex12 = item.value
           } else {
               formData.value.chengshi = formData.value.chengshi.concat('/', item.label)
               formData.value.zo_ex12 = formData.value.zo_ex12.concat(',', item.value)
           }
       })
    }
    
    
    const zo_ex41Range:Ref<any[]> = ref([
     ])
     // 选项的所有数据
    const zo_ex41Value:Ref<any[]> = ref([])
    const zo_ex41Input = (val: any) => {
        console.log(val)
        if (!formData.value.chengshi) {
            uni.showToast({
                title: '请先选择城市！',
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        } else {
            getPlaceRetrievalApi({
                queryString: val,
                region: formData.value.chengshi?.split('/')[1],
            }).then((res: any) => {
                zo_ex41Range.value = []
                res.forEach((item: any, index: number) => {
                    zo_ex41Range.value.push(item.name)
                })
                zo_ex41Value.value = res
            })
        }
    }
    
    const zo_ex42Range:Ref<any[]> = ref([
     ])
     // 选项的所有数据
    const zo_ex42Value:Ref<any[]> = ref([])
    const zo_ex42Input = (val: any) => {
        console.log(val)
        if (!formData.value.chengshi) {
            uni.showToast({
                title: '请先选择城市！',
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        } else {
            getPlaceRetrievalApi({
                queryString: val,
                region: formData.value.chengshi?.split('/')[1],
            }).then((res: any) => {
                zo_ex42Range.value = []
                res.forEach((item: any, index: number) => {
                    zo_ex42Range.value.push(item.name)
                })
                zo_ex42Value.value = res
            })
        }
    }
    watch([zo_ex41Value,zo_ex42Value],(nvl,ovl) => {
        formData.value.zo_ex17 = ''
        formData.value.zo_ex18 = ''
        zo_ex41Value.value.some((item, index) => {
            if (item.name == formData.value.zo_ex41) {
                formData.value.zo_ex17 = item.lng + ',' + item.lat + ',' + item.uid
                return true;
            }
        })
        zo_ex42Value.value.some((item, index) => {
            if (item.name == formData.value.zo_ex42) {
                formData.value.zo_ex18 = item.lng + ',' + item.lat + ',' + item.uid
                return true;
            }
        })
        
    }, {
        deep: true
    })
    watch([() => formData.value.zo_ex17, () => formData.value.zo_ex18, () => formData.value.chengshi, () => formData.value.zo_dat1, () => formData.value.zo_ex21], () => {
        if (formData.value.zo_ex17 && formData.value.zo_ex18 && formData.value.chengshi && formData.value.zo_dat1) {
            countkilometreApi({
                startPointer: formData.value.zo_ex17,
                endPointer: formData.value.zo_ex18,
                tactics: '0',
            }).then(res1 => {
                formData.value.zo_ex20 = res1.Kilometre
                formData.value.zo_ex54 = res1.tag
                formData.value.zo_ex46 = res1.toll
                formData.value.zo_ex53 = '0'
                countmoneyApi({
                    province: formData.value.chengshi.split('/')[0], //起始地点的省
                    city: formData.value.chengshi.split('/')[1], //起始地点市
                    Kilometre: res1.Kilometre, //公里数
                    discountType: formData.value.zo_ex21, //优惠类型
                    toll: res1.toll, //过路费
                    qtmoneys: '', //其他费用
                    yuyueDate: formData.value.zo_dat1, //预约时间
                    roadamt: '', //固定路线
                    oxygen: formData.value.zo_ex74, //是否吸氧
                }).then(res2 => {
                    formData.value.zo_ex23 = res2.money
                })
            })
        }
    })
    const go = () => {
        uni.navigateTo({
            url: '/pages/airTransshipment/airTransshipment'
        })
    }
    // const cchange = (idx) => {
    //     console.log(idx)
    // }
    // const hkzyList:Ref<any[]> = ref(['陆地转运', '待评价'])
    
    const showPopup3 = () => {
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        if (!formData.value.chengshi) {
            uni.showToast({
                title: '请先选择城市！',
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        } else {
            popup3.value.open()
        }
        // popup3.value.close()
    }
    const showPopup4 = () => {
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        if (!formData.value.chengshi) {
            uni.showToast({
                title: '请先选择城市！',
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        } else {
            popup4.value.open()
        }
        // popup4.value.close()
    }
    // onTabItemTap((e: any) => {
    //     console.log(e)
    //     uni.setTabBarItem({
    //       index: 0,
    //       text: '',
    //       // pagePath: 'pages/index/index',
    //       // iconPath: 'static/tabBar/home-1.png',
    //       // selectedIconPath: 'static/logo.png'
    //     })
    // })
</script>

<style lang="scss" scoped>
    .home {
        background-color: #f2f2f2;
        min-height: 100vh;
        // background: rgba(211, 211, 211, 1);
    }
    .swiper {
        height: 380rpx;
    }
    .swiper-img {
        width: 100%;
        height: 100%
    }
    :deep(.uni-forms) {
        padding: 0rpx 20rpx 20rpx;
        box-sizing: border-box;
    }
    .box-1 {
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 20rpx;
        margin: 20rpx 0;
    }
    .money-box {
        text-align: center;
        .money-span-1 {
            color: rgb(153, 153, 153);
            font-weight: bold;
        }
        .money-span-2 {
            color: #000;
            font-weight: bold;
        }
    }
    .button-img {
        width: 100rpx;
        height: 50rpx;
        margin-right: 20rpx;
    }
    .point-box {
        display: flex;
        align-items: center;
        .point-img {
            width: 60rpx;
            height: 60rpx;
        }
        .point-box-text-1 {
            margin-left: 20rpx;
            font-weight: bold;
        }
    }
    :deep(.uni-section .uni-section-header__content .distraction) {
        font-weight: bold;
    }
    .point-box-disabled-input {
        width: 100%;
    }
    // 禁用状态输入框
    :deep(.point-box-disabled-input .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .checkbox-class {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        box-sizing: border-box;
    }
    .dialog-content {
        height: 800rpx;
        overflow: scroll;
        .dialog-text-1 {
            font-weight: bold;
        }
        .dialog-text-2 {
            color: #313131;
            text-indent: 70rpx;
            line-height: 50rpx;
        }
    }
    .popup2-box {
        width: 600rpx;
        height: 500rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 40rpx;
        padding: 50rpx;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        .popup2-img {
            width: 150rpx;
            height: 150rpx;
        }
        .popup2-text {
            padding: 50rpx 0;
            text-align: center;
        }
    }
    .my-disabled-input-box {
        width: 100%;
        :deep(.uni-easyinput .uni-easyinput) {
            background-color: #fff !important;
            font-weight: bold;
        }
    }
    :deep(.my-disabled-input-box .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .hkzy {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #c7c1c1
    }
    .zylx {
        display: flex;
    }
    // 组合框下拉选项
    :deep(.uni-combox) {
        background: #fff;
    }
    :deep(.uni-combox .uni-combox__selector .uni-combox__selector-scroll) {
        max-height: 80vh !important;
    }
</style>
